<template>
  <section>
    <el-form label-width="80px" size="mini">
      <el-form-item label="">
        <el-popover placement="right" width="400" trigger="click">
          <el-table :data="scaleList" border size="mini">
            <el-table-column label="序号" type="index"/>
            <el-table-column label="宽(px)" prop="width"></el-table-column>
            <el-table-column label="高(px)" prop="height"></el-table-column>
          </el-table>
          <span slot="reference" class="tip">*建议尺寸 ▶</span>
        </el-popover>
      </el-form-item>
      <el-form-item label="介绍页面">
        <div class="form-item">
          <upload-img v-on:get="getImgUrl($event,'introduceImg')"></upload-img>
          <el-input size="mini" v-model="activity.data.introduceImg" class="input"/>
          <el-popover placement="right" trigger="hover" v-if="activity.data.introduceImg" >
            <div class="popover">
              <img :src="activity.data.introduceImg" width="60%"/>
            </div>
            <span slot="reference" class="tip">预览 ▶</span>
          </el-popover>
        </div>
      </el-form-item>
      <el-form-item label="分享页面" >
        <div class="form-item">
          <upload-img v-on:get="getImgUrl($event,'shareImg')"></upload-img>
          <el-input size="mini" v-model="activity.data.shareImg" class="input"/>
          <el-popover placement="right" trigger="hover" v-if="activity.data.shareImg">
            <div class="popover">
              <img :src="activity.data.shareImg" width="60%"/>
            </div>
            <span slot="reference" class="tip">预览 ▶</span>
          </el-popover>
        </div>
      </el-form-item>
    </el-form>
    <!--<el-button @click="saveActImgBtn(imgForm)" size="mini">保存</el-button>-->
  </section>
</template>

<script>
  import uploadImg from '@/common/uploadImg'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "actImg",
    components: {uploadImg},
    props: ['activity'],
    data(){
      return{
        scaleList:[
          {width:'400',height:'480'},
          {width:'320',height:'480'}
        ]
      }
    },
    created(){
      console.log(this.activity)
      if(!this.activity.data.shareImg){
        Vue.set(this.activity.data,'shareImg','')
      }
      if(!this.activity.data.introduceImg){
        Vue.set(this.activity.data,'introduceImg','')
      }
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      getImgUrl(data,type){
        console.log('获取图片————————————————',data)
        this.activity.data[type]=data[0].url
      },
      saveActImgBtn(imgForm){
        console.log(imgForm)
        console.log(this.activity)
        let tmp={id:this.activity.id}
        tmp.data=imgForm
        this.updateActivity(tmp)
      },
      updateActivity(tmp){
        console.log(tmp)
        this.fetch({name:"updateActivity",data:{...tmp}})
          .then(res=>{
            console.log(res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      }
    }
  }
</script>

<style scoped>
  .tip{
    color:blue;
  }
  .form-item{
    display: flex;
    flex-direction: column;
  }
  .input{
    width: 70%;
  }
  .popover{
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
</style>
